<template>
  <div class="AboutView">
    <el-container>
      <!-- 左边侧边栏 -->
      <el-aside width="200px">
       <el-menu unique-opened :default-active="num" class="el-menu-vertical-demo" background-color="#545c64"
        text-color="#BFCBD9" active-text-color="#409EFF">
        <div v-for="item in list" :key="item.name">


          <el-submenu :index="item.id" v-if="item.children">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <router-link :to="r.path" tag="li" v-for="r in item.children" :key="r.id">
                <el-menu-item :index="r.id">

                  <i :class="r.icon"></i>{{ r.name }}
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item v-else :index="item.id">
            <i :class="item.icon"></i>
            <router-link :to="item.path" tag="span">{{ item.name }}</router-link>

          </el-menu-item>
        </div>

      </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
       <div class="le">
        <Bread-Crumb></Bread-Crumb>
       </div>

          <!-- <div class="le">
          </div>
          <div class="ri">
            <div class="yi">
              <i class="el-icon-caret-bottom "></i>
            </div>
            <div class="er">wode99 (wode99)
              <i class="el-icon-caret-bottom "></i>
            </div> -->
          <!-- </div> -->
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import BreadCrumb from '@/components/BreadCrumb.vue'
export default {
  data() {
    return {
      num:"-1",
      list: [
        {
          id: "-1",
          name: "首页",
          path: "/index/IndeX",
          icon: "el-icon-s-home"
        },
        {
          id: "33",
          name: "管理员/权限",
          icon: "el-icon-lollipop",
          children: [
            {
              id: "4",
              name: "角色管理",
              path: "/ROOT/RoLe",
              icon: "el-icon-coffee-cup"
            },
            {
              id: "5",
              name: "管理员列表",
              path: "/ROOT/AdministrAtors",
              icon: "el-icon-s-custom"
            },
          ],
        },
        {
          id: "14",
          name: "Banner管理",
          path: "/Banner/BannEr",
          icon: "el-icon-picture-outline",

        },
        {
          id: "34",
          name: "CMS模块",
          icon: "el-icon-circle-plus-outline",
          children: [
            {
              id: "20",
              name: "单页管理",
              path: "/CMS/SinglePage",
              icon: "el-icon-edit"
            },
            {
              id: "21",
              name: "公告管理",
              path: "/CMS/NoTice",
              icon: "el-icon-service"
            },
          ]
        },
        {
          id: "121",
          name: "商城管理",
          icon: "el-icon-shopping-cart-full",
          children: [
            {
              id: "1122",
              name: "商品分类",
              path: "/MALL/ClassificaTion",
              icon: "el-icon-menu"
            },
            {
              id: "78",
              name: "规格尺寸",
              path: "/MALL/MallSize",
              icon: "el-icon-document-delete"
            },
            {
              id: "43",
              name: "商品管理",
              path: "/MALL/MallManage",
              icon: "el-icon-edit"
            }
          ]
        },
      ]
    }
    
  },
  components:{BreadCrumb},
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100vh;
}

 .el-header,
.el-footer {
  width: 100%;
  background-color: #B3C0D1;
  color: #333;
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
}


.le{
  height: 50px;
}
a{
  text-decoration: wavy;
}
</style>
